<template>
  <div>
    <h4>promise 示例</h4>
    <el-button type="primary" size="small" @click="handlePrint">打印示例</el-button>
    <el-button type="primary" size="small" @click="handleTest">async await</el-button>
  </div>
</template>
<script>
export default {
  components: {},
  mixins: [],
  props: {},
  data() {
    return {};
  },

  created() {},
  mounted() {},
  methods: {
    handlePrint() {
      // console.log('--开始----');
      // const p = new Promise(function(resolve, reject) {
      //   console.log('调用Promise');
      //   // resolve可以触发then中的回调执行
      //   resolve('执行了resolve');
      //   // reject('异常了');
      // });
      // p.then(res => {
      //   console.log('then 执行', res);
      // })
      //   .catch(err => {
      //     console.log('catch 执行', err);
      //   })
      //   .finally(() => {
      //     console.log('finally 执行');
      //   });
      // console.log('--结束----');

      // console.log('log内容--p', p);

      // reseut:
      // --开始----
      // 调用Promise
      // --结束----
      // catch 执行 异常了
      // finally 执行

      // 链式调用
      // function MyPromise() {
      //   return this;
      // }
      // MyPromise.prototype.then = function() {
      //   console.log('触发了then');
      //   return this;
      // };
      // new MyPromise().then().then();

      // // 链式调用的注意事项
      // let pr = new Promise((resolve, reject) => {
      //   resolve('promise实例');
      // });
      // pr.then(res => {
      //   console.log('res'); // undefined
      //   return '123';
      // })
      //   .then(res => {
      //     console.log('res'); // 123
      //     return new Promise(resolve => {
      //       resolve(456);
      //     });
      //   })
      //   .then(res => {
      //     console.log('res'); // 456
      //     return '直接返回的结果';
      //   })
      //   .then()
      //   .then('字符串')
      //   .then(res => {
      //     console.log('res'); // 直接返回的结果
      //   });

      // 链式调用的中断
      let pe = new Promise((resolve, reject) => {
        resolve('Promise的值');
      });
      pe.then(res => {
        console.log(res);
      })
        .then(res => {
          // 两种方式中断Promise
          // throw '通过throw中断';
          return Promise.reject('reject中断');
        })
        .then(res => {
          console.log(res);
        })
        .catch(res => {
          console.log('catch执行', res);
        });

      //async await
    },
    async handleTest() {
      console.log('1');
      // this.test();
      this.promisTest();
      console.log('2');
      // 输出顺序：1，3，2，4
    },
    async test() {
      console.log(3);
      var a = await 4;
      console.log(a);
    },
    // 此方法是test方法的promsise写法
    promisTest() {
      new Promise(resolve => {
        console.log(3);
        resolve(4);
      }).then(res => {
        console.log(res);
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
